<script setup lang="ts">
import DetailNavBar from "./childComps/DetailNavBar.vue";
import DetailSwiper from "./childComps/DetailSwiper.vue";
import DetailBaseInfo from "./childComps/DetailBaseInfo.vue";
import DetailShopInfo from "./childComps/DetailShopInfo.vue";
import DetailGoodsInfo from "./childComps/DetailGoodsInfo.vue";
import DetailParamInfo from "./childComps/DetailParamInfo.vue";
import DetailCommentInfo from "./childComps/DetailCommentInfo.vue";
import DetailBottomBar from "./childComps/DetailBottomBar.vue";
import GoodsList from "components/content/goods/GoodsList.vue";
import Scroll from "components/common/scroll/Scroll.vue";
import NavBar from "../../components/common/navbar/NavBar.vue";

import { ref, reactive, onMounted, toRefs } from "vue";
import { useRoute, useRouter } from "vue-router";

import {
  getDetail,
  getRecommend,
  Goods,
  Shop,
  GoodsParam,
  CartGoodsInfo,
} from "network/detail.js";
import { debounce } from "common/utils.js";

const isShowBackTop = ref(false);
const scrollRef: any = ref(null);
const navbarRef: any = ref(null);

const insData = reactive({
  iid: "" as any,
  topImages: [],
  goodsInfo: {},
  shop: {},
  detailInfo: {},
  paramInfo: {},
  commentInfo: {},
  recommends: [],
  currentIndex: 0,
});

const themeTopYs: any = [];
const getThemeTopY = null;
const paramsOffsetTop = { index: 1, value: 0 };
const commentssOffsetTop = { index: 2, value: 0 };
const recommendsOffsetTop = { index: 3, value: 0 };

// const { topImages } = toRefs(insData);

function navbarItemClick(index: any) {
  // 因为ref引用元素的父级上层有个高为44px navbar，所以造成子元素offsetTop 值不太精确，所以要少滚动44px才对
  scrollRef.value.scrollTo(0, -themeTopYs[index] + 44, 100);
  // scrollRef.value.scrollTo(0, -data.themeTopYs[index], 100);
  console.log(index);
}

function scrollPosition(position: any) {
  console.log(position);

  let scrollY = -position.y;
  if (scrollY >= recommendsOffsetTop.value) {
    navbarRef.value.curIndex = recommendsOffsetTop.index;
  } else if (
    scrollY >= commentssOffsetTop.value &&
    scrollY <= recommendsOffsetTop.value
  ) {
    navbarRef.value.curIndex = commentssOffsetTop.index;
  } else if (
    scrollY >= paramsOffsetTop.value &&
    scrollY <= commentssOffsetTop.value
  ) {
    navbarRef.value.curIndex = paramsOffsetTop.index;
  } else {
    navbarRef.value.curIndex = 0;
  }

  isShowBackTop.value = -position.y > 1000;
}

const route = useRoute();
// 保存商品id
insData.iid = route.params.iid;

async function getDetaildata(iid: string) {
  // 根据商品id获取商品详情相关数据
  await getDetail(iid).then((res: any) => {
    let data = {} as any;
    if (res && res.result) {
      data = res.result;
    }

    // 获取轮播图片
    let topImages: [] = data.itemInfo.topImages;
    if (data && data.itemInfo) insData.topImages.push(...topImages);

    // 获取商品基本信息
    if (data && data.itemInfo) {
      insData.goodsInfo = new Goods(
        data.itemInfo,
        data.columns,
        data.shopInfo.services
      );
    }

    // 获取店铺基本信息
    insData.shop = new Shop(data.shopInfo);

    // 获取商品的详情数据
    insData.detailInfo = data.detailInfo;

    // 获取商品参数信息
    insData.paramInfo = new GoodsParam(
      data.itemParams.info,
      data.itemParams.rule
    );

    // 获取评论信息
    if (data.rate.cRate !== 0 && data.rate.list) {
      insData.commentInfo = data.rate.list[0];
    }
  });
}

onMounted(async () => {
  await getDetaildata(insData.iid);
  scrollRef.value.refresh();
});
</script>

<template>
  <div class="detail">
    <DetailNavBar
      class="detail-nav"
      @titleClick="navbarItemClick"
      ref="navbarRef"
    ></DetailNavBar>

    <scroll
      class="wrapper"
      ref="scrollRef"
      :probe-type="3"
      @scroll.passive="scrollPosition"
    >
      <div class="content">
        <detail-swiper :top-images="insData.topImages"></detail-swiper>
      </div>
    </scroll>
  </div>
</template>

<style lang="less" scoped>
  .detail {
    position: relative;
    -z-index: 9;
    background-color: #fff;
    height: 100vh;
  }

  .detail-nav {
    position: relative;
    z-index: 9;
    background-color: #fff;
  }

  .wrapper {
    height: calc(100% - 44px - 49px);
    overflow: hidden;
  }
</style>
